<template>
  <!-- 账户管理 -->
  <div class="account-container">
    <PageCard
      title="查询条件"
      :showTitle='false'
    >
      <el-form
        :model="formData"
        label-position="right"
        size="small"
        :inline="true"
        ref="searchForm"
        label-width="100px"
      >

        <el-form-item prop="wasteClassifyCode">
          <el-select
            class="w350"
            v-model="formData.wasteClassifyCode"
            filterable
            placeholder="请选择医废类型"
          >
            <el-option
              v-for="item in wasteClassifyCodeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="status">
          <el-select
            class="w350"
            v-model="formData.status"
            filterable
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="hospitalPlaceId">
          <el-select
            class="w350"
            v-model="formData.hospitalPlaceId"
            filterable
            placeholder="请选择暂存点"
          >
            <el-option
              v-for="item in hospitalPlaceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="hospitalDepartId">
          <Treeselect
            class="w350"
            v-model="formData.hospitalDepartId"
            placeholder="请选择所属科室"
            :options="departmentList"
            :load-options="loadOptions"
            :defaultOptions="true"
            searchPromptText="请输入科室名称或者首字母拼音"
            :async="true"
            noResultsText="暂无数据"
          />
          <!-- <el-select
            class="w350"
            v-model="formData.hospitalDepartId"
            filterable
            placeholder="请选择所属科室"
          >
            <el-option
              v-for="item in departmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker
            v-model="formData.time"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="keyWord">
          <el-input
            class="w350"
            placeholder="请输入医废编号/集装箱编号/人员姓名/出库单号"
            v-model="formData.keyWord"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch()"
          >查询</el-button>
          <el-button @click="handleReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </PageCard>
    <PageCard
      title="医废列表"
      icon_type="list"
      :hasCreate="false"
      btnText="新增设备"
      @create="handleAdd()"
    >
      <PageTable
        :data="data"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :total="total"
        @handleChange="handleSearch"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="code"
          label="医废编号"
          show-overflow-tooltip
          width="160"
        >
        </el-table-column>
        <el-table-column
          min-width="200"
          prop="hospitalDepartName"
          label="科室"
        > </el-table-column>
        <el-table-column
          prop="hospitalPlaceName"
          min-width="200"
          label="医废暂存点"
        >
        </el-table-column>
        <el-table-column
          prop="wasteClassifyName"
          label="医废类型"
        >
        </el-table-column>
        <el-table-column
          prop="collectUserStaffName"
          label="收集人"
        >
        </el-table-column>
        <el-table-column
          prop="handUserStaffName"
          min-width="140"
          label="科室交接人"
        >
        </el-table-column>
        <el-table-column
          prop="userRevicerName"
          min-width="160"
          label="处置公司人员"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
          <template slot-scope="scope">
            {{scope.row.status | status}}
          </template>
        </el-table-column>
        <el-table-column
          prop="wasteBoxCode"
          min-width="150"
          label="集装箱编号"
        >
        </el-table-column>
        <el-table-column
          prop="ckCode"
          min-width="150"
          label="出库单号"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click.stop="handleEdit(scope.row)"
            >查看</el-button>
            <el-button
              type="text"
              @click.stop="handleViewLable(scope.row)"
            >医废标签</el-button>
          </template>
        </el-table-column>
      </PageTable>
    </PageCard>
    <Details ref="Details"></Details>
    <WasteLabel ref="WasteLabel"></WasteLabel>
  </div>
</template>

<script>
import PageTable from "@/components/PageTable";
import PageCard from "@/components/PageCard";
import * as medicalWasteApi from "@/api/medicalWaste";
import WasteLabel from "./components/wasteLabel";
import * as hospitalPlaceAPi from "@/api/hospitalPlace.js";
import { hospitalDepartList } from "@/api/hospitalDepart";
import Details from "./components/details.vue";
import * as Utils from "@/utils";
import { ASYNC_SEARCH } from "@riophae/vue-treeselect";
export default {
  name: "Users",
  components: {
    PageTable: PageTable,
    PageCard: PageCard,
    Details: Details,
    WasteLabel: WasteLabel,
  },
  filters: {
    status(val) {
      if (!val) return "";
      switch (val) {
        // do_collect：收集，in_depot：入库，out_depot：出库
        case "do_collect":
          return "收集";
        case "in_depot":
          return "入库";
        case "out_depot":
          return "出库";
      }
    },
  },
  data() {
    return {
      formData: {
        hospitalPlaceId: "",
        hospitalDepartId: null,
        wasteClassifyCode: "", //医废类型
        status: "",
        time: "",
        createTimeEnd: "",
        createTimeStart: "",
        keyWord: "",
      },
      wasteClassifyCodeList: [], //医废类型
      currentPage: 1,
      pageSize: 10,
      total: 0,
      data: [],
      multipleTable: [], //批量选择
      deviceClassifyList: [], //设备类型列表
      hospitalPlaceList: [], //暂存点列表
      departmentList: [], //科室列表
      statusList: [
        // normal：正常使用 unused 未使用
        {
          label: "全部",
          value: "",
        },
        {
          label: "收集",
          value: "do_collect",
        },
        {
          label: "入库",
          value: "in_depot",
        },
        {
          label: "出库",
          value: "out_depot",
        },
      ],
    };
  },
  created() {
    this.handleSearch(1, 10);
    this.handleGetHospitalPlaceList(); //获取暂存点列表
    this.handleGetDepartList(); //获取科室列表
    this.handleGetListByType(); //获取医废类型
  },
  methods: {
    async loadOptions({ action, searchQuery, callback }) {
      let _this = this
      if (action === ASYNC_SEARCH) {
        let res = await hospitalDepartList({
          isPage: false,
          name: searchQuery,
        });
        if (res && res.success) {
          let departmentList = res.data.map((item) => {
            item.label = item.name;
            return item;
          });
          this.departmentList = Utils.treeDataTranslate(departmentList);
          callback(null, this.departmentList);
        }
      } 
    },
    //获取医废类型字典
    handleGetListByType() {
      medicalWasteApi.getListByType().then((res) => {
        if (res && res.success) {
          this.wasteClassifyCodeList = res.data;
        }
      });
    },
    //获取暂存点列表
    handleGetHospitalPlaceList() {
      hospitalPlaceAPi.hospitalPlaceList({ isPage: false }).then((res) => {
        if (res && res.success) {
          this.hospitalPlaceList = res.data;
        }
      });
    },
    //获取科室列表
    handleGetDepartList() {
      hospitalDepartList({ isPage: false }).then((res) => {
        if (res && res.success) {
          let departmentList = res.data.map((item) => {
            item.label = item.name;
            return item;
          });
          this.departmentList = Utils.treeDataTranslate(departmentList);
        }
      });
    },
    // 查询
    handleSearch(current, limit) {
      this.currentPage = current;
      this.pageSize = limit;
      let params = {
        ...this.formData,
        pageIndex: current || 1,
        pageSize: limit || 10,
      };
      params.createTimeStart = this.formData.time ? this.formData.time[0] : "";
      params.createTimeEnd = this.formData.time ? this.formData.time[1] : "";
      delete params.time;
      // 调接口查询
      this.handleGetDataList(params);
    },
    //获取列表数据
    handleGetDataList(params) {
      medicalWasteApi.wasteBaseGetList(params).then((res) => {
        if (res && res.success) {
          this.data = res.data;
          this.total = res.total;
        }
      });
    },
    // 重置
    handleReset() {
      this.$refs["searchForm"].resetFields();
    },
    handleAdd() {
      this.$refs.Details.showModal("add");
    },
    handleEdit(row) {
      this.$refs.Details.showModal("edit", row);
    },
    handleViewLable(row) {
      this.$refs.WasteLabel.showModal(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.account-container {
  .btns {
    text-align: right;
  }
}
::v-deep .vue-treeselect__control {
  height: 32px;
  line-height: 32px;
}

::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  line-height: 32px;
}
</style>
